import { memo } from "react"
import Svg from "@/components/base/Svg"
import styled from "@emotion/styled"

const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 48rem;
`

const Label = styled.div`
    font-weight: 500;
    font-size: 14rem;
    line-height: 20rem;
    text-align: center;
    color: #40444f;
`

export const BetRecordEmpty = memo(({ desc }: { desc?: string }) => {
    return (
        <Wrapper>
            <Svg src="base_image/no_data.svg" />
            <Label children={desc || "There is no data yet！"} />
        </Wrapper>
    )
})
